<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-09-14 17:50:18
 * @LastEditTime: 2023-09-14 19:37:39
 * @LastEditors: ''
-->
<template>
  <transition name="fade">
    <div :class="classes" :style="outerStyles" v-show="show">
      <div :class="innerClasses" :style="styles"></div>
    </div>
  </transition>
</template>

<script setup>
defineOptions({
  name: 'LoadingBar'
})

const prefixCls='haloe-loading-bar'
import {ref,computed} from "vue"

let percent=ref(0);
let status=ref("success")
let show=ref(false)

const props=defineProps({
  color: {
    type: String,
    default: 'primary'
  },
  failedColor: {
    type: String,
    default: 'error'
  },
  height: {
    type: Number,
    default: 2
  }}
)

const classes=computed(()=>{
  return `${prefixCls}`
})

const innerClasses=computed(()=>{
  return [  
    `${prefixCls}-inner`,
    {
      [`${prefixCls}-inner-color-primary`]: props.color === 'primary' && status.value === 'success',
      [`${prefixCls}-inner-failed-color-error`]: props.failedColor === 'error' && status.value === 'error'
    }
  ]
})

const outerStyles=computed(()=>{
  return {
    height:`${props.height}px`
  }
})

const styles=computed(()=>{
  let style={
    width:`${percent.value}%`,
    height:`${props.height}px`
  };
  if(props.color!=="primary"&&status.value==='success'){
    style.backgroundColor = props.color;
  }
  if(props.failedColor!=="error"&&status.value==='error'){
    style.backgroundColor=props.failedColor
  }
  return style
})

defineExpose({
  color:props.color,
  // failedColor:props.failedColor,
  // height:props.height,
  // props.color,
  // props.failedColor,
  // height:props.height,
  // color:()=>props.color,
  percent,
  status,
  show
})

</script>
